<template>
  <div class="app-container">
    <div
      v-show="
        !modifyInfo.visible && !detailInfo.visible && !checkPriceInfo.visible
      "
    >
      <!-- 条件栏 -->
      <page-filter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
      >
        <template v-slot:filter-revoke>
          <el-button :disabled="!canRevoke" @click="revoke()">撤回</el-button>
        </template>
        <template v-slot:filter-confirm>
          <el-button :disabled="!canConfirm" @click="handleCheckConfirm()"
            >确认</el-button
          >
        </template>
        <template v-slot:filter-reject>
          <el-button :disabled="!canConfirm" @click="handleCheckReject()"
            >驳回</el-button
          >
        </template>
        <template v-slot:filter-storage>
          <el-button :disabled="!canStorage" @click="storage()">入库</el-button>
        </template>
        <template v-slot:filter-del>
          <el-button :disabled="!canSubmit" @click="remove()">删除</el-button>
        </template>
      </page-filter>
      <!-- 表格 -->
      <table-container
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        @handleEvent="handleEvent"
        :row-class-name="tableRowClassName"
      >
        <template v-slot:col-orderNo="scope">
          <span
            class="slip-edit"
            v-if="$permission('surgeryAndTableReceipt:detail')"
            @click="showDetail(scope.row)"
            >{{ scope.row.orderNo || '-' }}</span
          >
          <span v-else>{{ scope.row.orderNo || '-' }}</span>
        </template>
      </table-container>
    </div>
    <surgery-and-table-receipt-details
      v-if="detailInfo.visible"
      v-model:visible="detailInfo.visible"
      :id="detailInfo.id"
      @returnBack="getList"
    ></surgery-and-table-receipt-details>
    <surgery-and-table-receipt-modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      :id="modifyInfo.id"
      @returnModify="returnModify"
    />
    <check-price
      v-if="checkPriceInfo.visible"
      v-model:visible="checkPriceInfo.visible"
      :id="checkPriceInfo.id"
    ></check-price>
  </div>
</template>

<script setup name="surgeryAndTableReceipt">
import {
  withTableReceivingOrderDelete,
  withTableReceivingOrderPage,
  withTableReceivingOrderConfirm,
  withTableReceivingOrderReject,
  withTableReceivingOrderSubmit,
  withTableReceivingOrderRevoke,
  withTableReceivingOrderExecute,
  withTableReceivingOrderSplit,
} from '@/api/stock'
import PageFilter from '@/components/PageFilter/index'
import TableContainer from '@/components/TableContainer/index'
import SurgeryAndTableReceiptDetails from './detail'
import SurgeryAndTableReceiptModify from '@/views/stock/surgeryAndTableReceipt/modify'
import { getSupplierAll } from '@/api/core'
import CheckPrice from '@/views/stock/surgeryAndTableReceipt/checkPrice'

const { proxy } = getCurrentInstance()
const emit = defineEmits()

const filterInfo = reactive({
  query: {
    sort: 'create_time desc',
    supplierAuth: 'supplierId',
    // depotAuth: "depotId" fix:SPD-720
  },
  list: [
    {
      type: 'button',
      label: '新增',
      event: add,
      show: proxy.$permission('surgeryAndTableReceipt:add'),
    },
    // {
    //   type: "slot",
    //   value: "revoke",
    //   show: proxy.$permission("surgeryAndTableReceipt:revoke")
    // },
    {
      type: 'slot',
      value: 'confirm',
      show: proxy.$permission('surgeryAndTableReceipt:confirm'),
    },
    {
      type: 'slot',
      value: 'reject',
      show: proxy.$permission('surgeryAndTableReceipt:reject'),
    },
    {
      type: 'slot',
      value: 'storage',
      show: proxy.$permission('surgeryAndTableReceipt:storage'),
    },
    {
      type: 'slot',
      value: 'del',
      show: proxy.$permission('surgeryAndTableReceipt:del'),
    },
    {
      label: '供应商',
      value: 'supplierId',
      type: 'slip-select',
      api: getSupplierAll,
      query: { supplierAuth: 'supplierId', sort: 'create_time desc' },
      clearable: true,
      keyField: 'supplierName',
      valueField: 'supplierId',
      event: search,
    },
    {
      type: 'input',
      label: '收货单号',
      value: 'orderNoLike',
      event: search,
    },
    { type: 'button', label: '搜索', event: search },
  ],
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: withTableReceivingOrderPage,
  selections: [],
  fieldList: [
    { label: '收货单号', value: 'orderNo', type: 'slot' },
    { label: '供应商', value: 'supplierName' },
    { label: '仓库', value: 'depotName' },
    { label: '收货人', value: 'receivingUserName' },
    { label: '收货时间', value: 'receivingTime' },
    { label: '入库人', value: 'storageUserName' },
    { label: '入库时间', value: 'storageTime' },
    { label: '状态', value: 'statusValue' },
    { label: '备注', value: 'remark' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '提交',
        event: submit,
        show: proxy.$permission('surgeryAndTableReceipt:submit'),
        ifRender: function (row) {
          return row.status === 'pend_submit'
        },
      },
      {
        label: '修改',
        event: update,
        show: proxy.$permission('surgeryAndTableReceipt:update'),
        ifRender: function (row) {
          return row.status === 'pend_submit'
        },
      },
      {
        label: '验价',
        event: handleCheckPrice,
        show: proxy.$permission('surgeryAndTableReceipt:check'),
        ifRender: function (row) {
          return row.status === 'pend_check_price'
        },
      },
      {
        label: '确认',
        event: handleCheckConfirm,
        show: proxy.$permission('surgeryAndTableReceipt:confirm'),
        ifRender: function (row) {
          return row.status === 'pend_check_price'
        },
      },
      {
        label: '驳回',
        event: handleCheckReject,
        show: proxy.$permission('surgeryAndTableReceipt:reject'),
        ifRender: function (row) {
          return row.status === 'pend_check_price'
        },
      },
      {
        label: '入库',
        event: storage,
        show: proxy.$permission('surgeryAndTableReceipt:storage'),
        ifRender: function (row) {
          return row.status === 'pend_storage'
        },
      },
      {
        label: '拆分',
        event: splitOrder,
        show: proxy.$permission('surgeryAndTableReceipt:split'),
        ifRender: function (row) {
          return row.status === 'pend_split'
        },
      },
      {
        label: '删除',
        event: remove,
        show: proxy.$permission('surgeryAndTableReceipt:del'),
        ifRender: function (row) {
          return row.status === 'pend_submit'
        },
      },
    ],
  },
})
const detailInfo = reactive({
  visible: false,
  id: '',
})
let modifyInfo = reactive({
  visible: false,
  id: '',
  title: '新增',
})
const checkPriceInfo = reactive({
  visible: false,
  id: '',
})
const canSubmit = computed(() => {
  return (
    tableInfo.selections.filter((item) => item.status !== 'pend_submit')
      .length === 0 && tableInfo.selections.length !== 0
  )
})
const canStorage = computed(() => {
  return (
    tableInfo.selections.filter((item) => item.status !== 'pend_storage')
      .length === 0 && tableInfo.selections.length !== 0
  )
})
const canRevoke = computed(() => {
  return (
    tableInfo.selections.filter((item) => item.status !== 'pend_storage')
      .length === 0 && tableInfo.selections.length !== 0
  )
})
const canConfirm = computed(() => {
  return (
    tableInfo.selections.filter((item) => item.status !== 'pend_check_price')
      .length === 0 && tableInfo.selections.length !== 0
  )
})

function returnModify() {
  if (modifyInfo.id) {
    getList()
  } else {
    search()
  }
}
// 获取列表
function getList() {
  tableInfo.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.initCurpage = Math.random()
  tableInfo.refresh = Math.random()
}
//查看明细
function showDetail(row) {
  detailInfo.id = row.id
  detailInfo.visible = true
}
//查看采购单明细
// function showpurchOrderNoDetail(row) {
//   this.purchOrder.purchOrderId = row.purchOrderId;
//   this.purchOrder.visible = true;
// }
//删除
function remove(row = undefined) {
  const ids = getIds(row)
  proxy
    .$handleAPI('delete', withTableReceivingOrderDelete, ids)
    .then((resp) => {
      if (resp && resp.success) {
        search()
      }
    })
}
function getIds(row = undefined) {
  let ids = []
  if (row) {
    ids.push(row.id)
  } else {
    ids = tableInfo.selections.map((row) => row.id)
  }
  return ids
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.selections = [...data]
      break
  }
}
function tableRowClassName({ row, rowIndex }) {
  if (!row.haveBillRegistration) {
    return 'warning-row'
  }
  return ''
}
function add() {
  modifyInfo = {
    visible: true,
    id: '',
    title: '新增',
  }
}
function update(row) {
  modifyInfo = {
    visible: true,
    id: row.id,
    title: '修改',
  }
}
//提交
function submit(row = undefined) {
  const ids = getIds(row)
  withTableReceivingOrderSubmit(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
function handleCheckPrice(row) {
  checkPriceInfo.visible = true
  checkPriceInfo.id = row.id
}
function splitOrder(row) {
  let ids = [row.id]
  withTableReceivingOrderSplit(ids).then((res) => {
    if (res && res.success) {
      getList()
    }
  })
}
function handleCheckConfirm(row = undefined) {
  const ids = getIds(row)
  withTableReceivingOrderConfirm(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
function handleCheckReject(row = undefined) {
  const ids = getIds(row)
  withTableReceivingOrderReject(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
function storage(row = undefined) {
  const ids = getIds(row)
  withTableReceivingOrderExecute(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
function revoke(row = undefined) {
  const ids = getIds(row)
  withTableReceivingOrderRevoke(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
</script>

<style scoped lang="scss">
:deep(.el-table .warning-row) {
  background: #f5e4e4;
}

// :deep(.el-table__body tr.hover-row > td) {
//   background-color: transparent !important;
// }
</style>
